<template>
  <div ref="aniBox" class="animal-box" @wheel="handleWheel">

    <!--        <el-row-->
    <!--                :gutter="30"-->
    <!--                type="flex"-->
    <!--                justify="start"-->
    <!--                align="middle"-->
    <!--                v-for="i in layout.row">-->
    <!--          <el-col-->
    <!--                  v-for="j in computedCol(i)"-->
    <!--                  :span="24/layout.col">-->
    <!--            <AnimalSimpleCard :value="animalList[]"></AnimalSimpleCard>-->
    <!--          </el-col>-->

    <!--        </el-row>-->

    <el-row
        :gutter="30"
        align="middle"
        justify="start"
        type="flex">
      <el-col v-for="(item,index) in animalList" :span="24/col">
        <AnimalSimpleCard :value="item"></AnimalSimpleCard>
      </el-col>

    </el-row>

    <!--    加载时的骨架屏-->
    <el-row
        :gutter="30"
        type="flex"
        justify="start"
        align="middle"
    >
      <el-col v-for="i in layout.col" :span="24/layout.col">
        <el-skeleton
            style="width: 150px"
            :loading="loading"
            animated
            :throttle="500"
        >
          <template slot="template">
            <el-skeleton-item
                variant="image"
                style="width: 200px; height: 200px;"
            />
            <div style="padding: 14px 0;" class="flex-col-center">
              <el-skeleton-item variant="h3" style="width: 50%;" />
            </div>
          </template>

        </el-skeleton>
      </el-col>
    </el-row>

<!--    加载更多按钮-->
<!--    样式一-->
<!--       <div :class="[loading?'active-loading':'','animal-loading-btn','flex-row-center']" @click="getAnimal" >-->
<!--        <span v-for="(i,index) in 6"  >🟠</span>-->
<!--       </div>-->



  </div>
</template>

<script>
import AnimalSimpleCard from "@/components/animal/AnimalSimpleCard.vue";

export default {
  name: "AnimalBox",
  props: {
    col: {
      type: Number,
      default: 4
    },
    list: {
      type: Array,
    }
  },
  components: {AnimalSimpleCard},
  data(){

    return {
      loading: false,
      animalList: [],
      layout: {
        col: this.$props.col,
        row: 0,
      }
    }
  },
  computed:{
    computedCol(){
      return (i)=> {
        let num = this.list.length
        let leftCol = num - (i - 1) * this.layout.col
        return leftCol > this.layout.col ? this.layout.col : leftCol
      }
    }
  },
  methods:{
    handleWheel(e){

    },

    setRow(){
      this.layout.row=Math.ceil(this.num/this.layout.col)
    }
  },
  watch: {
    col(newV) {
      this.layout.col = newV
      this.setRow()
    },
    list(newV) {
      this.animalList = newV
    }
  },
  mounted() {
    this.setRow()
  }
}
</script>

<style scoped lang="less">
  .animal-box{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: auto;
    .el-row{
      width: 95%;
      margin-bottom: 20px;
    }


  }
  @keyframes jump {

    100%{
      margin-top: 10px;
    }
  }

</style>